@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Microsoft YaHei', system-ui, sans-serif;
  }
}

@layer components {
  .tree-line {
    position: absolute;
    background: #3498db;
  }
  
  .tree-line-vertical {
    width: 2px;
    height: 30px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .tree-line-horizontal {
    height: 2px;
    top: -30px;
  }
  
  .tree-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #3498db;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
  }
}